<?php
	$ls_gridname	= 'dtl_sample2';


// ----------------- >> Form Detail << ----------------- ?>
<script type="text/javascript">

	var LOVBarangPO = function(ao_option){
		try{
			if(ao_option==undefined){ ao_option={}; }
			var lf_onSelect	= (ao_option.onSelect==undefined || typeof(ao_option.onSelect)!='function') ? function(){} : ao_option.onSelect;
			
			// Create Popup
			var $popup	= openPopup({ title:'Daftar Barang' , width:700, height:370 });
			var ls_id	= $popup.attr('id');
			
			// Append Datagrid Container
			var ls_gridName	= 'grid_'+ls_id;
			$popup	.html(	$('<div>')	.attr('id', 'tb'+ls_id).attr('style','padding:5px;height:auto;')
										.html(	$('<div>').html($('<form>')	.attr('id','fm_search_'+ls_id).data('rel',ls_id).submit(function(e){ $('#'+ls_gridName).datagrid('reload', $('#fm_search_'+$(this).data('rel')).serializeObject()); e.preventDefault(); })
																			.html('<table class="tb_form" style="margin-bottom:0px"><tr><td width="100">Keyword</td><td><input type="text" name="keyword" class="textfield medium" /><a href="#" class="easyui-linkbutton" iconCls="icon-search" id="btn_search'+ls_id+'" rel="'+ls_id+'">Search</a></td></tr></table>')
																)
												)
							)
					.append($('<div>').attr('id', ls_gridName).attr('toolbar', '#tb'+$popup.attr('id')));
			
			$('#btn_search'+ls_id).click(function(){ $('#'+ls_gridName).datagrid('reload', $('#fm_search_'+$(this).attr('rel')).serializeObject()); return false; });
			$('#btn_search'+ls_id).linkbutton({  
				plain:true  
			}); 
			
			// Build Datagrid
			var ls_param = (ao_option.param==undefined ? '' : ao_option.param);
			$('#'+ls_gridName).datagrid({  
				url:gs_path+'/km_barang/getdatabyvendor/'+ls_param,
				queryParams: $('#fm_search_'+ls_id).serializeObject(),
				height:337,
				pagination:true,
				singleSelect:true,
				columns:[[
					{ field : 'barang_barcode', title : 'Barcode', width : 100, sortable:true },
					{ field : 'barang_nama', title : 'Nama Barang', width : 300, sortable:true },
					{ field : 'kemasan_nama_besar', title : 'Kemasan Besar', width:200, sortable:true },
					{ field : 'satuan_nama_besar', title : 'Satuan Besar', width:200, sortable:true },
					{ field : 'harga_beli', title : 'Harga Beli', width:200, sortable:true },
					{ field : 'kemasan_nama', title : 'Kemasan Kecil', width:200, sortable:true },
					{ field : 'satuan_nama', title : 'Satuan Kecil', width:200, sortable:true },
					{ field : 'harga_beli_pcs', title : 'Harga Beli Pcs', width:200, sortable:true }
				]],
				onSelect:function(rowIndex, rowData){ lf_onSelect(rowData); closePopup(); }
			});
			
		} catch (err) { alert('Func. LOVSampleReference :\n' + err); }
	};

	$(document).ready(function(){
		
		// Setup Form
		$('#form_<?php echo $ls_gridname; ?>').setupForm([
			{ name: 'urutan', type:'numeric', precision:0 },
			{ name: 'kd_barang', type: 'lov', size: 'short',
				onClearButton:function(){
					$(this).setval(''); 
					$('#nama_barang').setval(''); 
					$('#<?php echo $ls_gridname; ?>_nama_barang').setval('');
					$('#<?php echo $ls_gridname; ?>_kemasan').setval(''); 
					$('#<?php echo $ls_gridname; ?>_satuan').setval('');
					$('#<?php echo $ls_gridname; ?>_harga_beli').setval(''); 
					$('#<?php echo $ls_gridname; ?>_kemasan_pcs').setval('');
					$('#<?php echo $ls_gridname; ?>_satuan_pcs').setval(''); 
					$('#<?php echo $ls_gridname; ?>_harga_beli_pcs').setval(''); 
				},
				onActionButton:function(){ 
					LOVBarangPO({ param:'?kd_vendor='+$('#kd_vendor').getval(), onSelect:function(row){ 
						$('#<?php echo $ls_gridname; ?>_kd_barang').setval(row.barang_barcode); 
						$('#<?php echo $ls_gridname; ?>_nama_barang').setval(row.barang_nama);
						$('#<?php echo $ls_gridname; ?>_kemasan').setval(row.satuan_nama_besar); 
						$('#<?php echo $ls_gridname; ?>_satuan').setval(row.kemasan_nama_besar);
						$('#<?php echo $ls_gridname; ?>_harga_beli').setval(row.harga_beli); 
						$('#<?php echo $ls_gridname; ?>_kemasan_pcs').setval(row.satuan_nama);
						$('#<?php echo $ls_gridname; ?>_satuan_pcs').setval(row.kemasan_nama); 
						$('#<?php echo $ls_gridname; ?>_harga_beli_pcs').setval(row.harga_beli_pcs); 
						$('#<?php echo $ls_gridname; ?>_qty_pesan').focus();
					} }); 
				}
			},
			{ name: 'nama_barang', type: 'text', size: '60', readonly:true },
			{ name: 'qty_order', type: 'numeric', precision:2 },
			{ name: 'kemasan', type: 'text', size: '24', readonly:true },
			{ name: 'satuan', type: 'text', size: '24', readonly:true },
			{ name: 'qty_pesan', type: 'text', size: '24' },
			{ name: 'harga_beli', type: 'text', size: '24' },
			{ name: 'kemasan_pcs', type: 'text', size: '24', readonly:true },
			{ name: 'satuan_pcs', type: 'text', size: '24', readonly:true },
			{ name: 'qty_pesan_pcs', type: 'text', size: '24' },
			{ name: 'harga_beli_pcs', type: 'text', size: '24' },
			{ name: 'diskon_1', type: 'text', size: '15' },
			{ name: 'diskon_2', type: 'text', size: '15' },
			{ name: 'diskon_3', type: 'text', size: '15' },
			{ name: 'diskon_4', type: 'text', size: '15' },
			{ name: 'diskon_5', type: 'text', size: '15' },
			{ name: 'catatan', type: 'textarea' }
		], {}, { prefix:'<?php echo $ls_gridname; ?>_' });
		
		// Set Hidden Object
		$('#<?php echo $ls_gridname; ?>_urutan').hide();
		
		$('#<?php echo $ls_gridname; ?>_catatan').attr('cols','130');
		$('#<?php echo $ls_gridname; ?>_catatan').attr('rows','3');

		// Create Dialog
		$('#form_<?php echo $ls_gridname; ?>_container').dialog({
			closed:true,
			modal:true,
			title: '_',
			width:850,
			height: 500,
			buttons:[{
				text:'Save',
				iconCls:'icon-save',
				handler:function(){
					var ls_mode			= $('#form_<?php echo $ls_gridname; ?>').data('mode');
					var row				= formToJSON('form_<?php echo $ls_gridname; ?>');
					var ls_error		= '';
					
					// Validasi
					
					if(row.kd_barang == ''){
						ls_error	+= 'Isi Barang\n';
					}
					if(row.qty_pesan == ''){
						ls_error	+= 'Isi Jumlah Pesan\n';
					}
					
					// Eksekusi
					if(ls_error!=''){
						$.messager.alert('Error', nl2br(ls_error), 'error');
					}else{
						if(ls_mode=='create'){
							$('#<?php echo $ls_gridname; ?>').datagrid('appendRow', row );
							$('#form_<?php echo $ls_gridname; ?>_container').dialog('close');
						} else {
							var selectedIndex = $('#<?php echo $ls_gridname; ?>').data('selectedIndex');
							
							updateRowFlag('<?php echo $ls_gridname; ?>', row); // Patching Flag Update
							$('#<?php echo $ls_gridname; ?>').datagrid('updateRow',{index:selectedIndex,row:row});
							
							$('#form_<?php echo $ls_gridname; ?>_container').dialog('close');
							jsonToForm(oSel, {prefix:'<?php echo $ls_gridname; ?>_'});
							$('#<?php echo $ls_gridname; ?>_kd_barang').val( $('#<?php echo $ls_gridname; ?>_kd_barang').val() );
						}
					}
				}
			},{
				text:'Close',
				iconCls:'icon-cancel',
				handler:function(){
					$('#form_<?php echo $ls_gridname; ?>_container').dialog('close');
				}
			}]
		});

		$('#<?php echo $ls_gridname; ?>_qty_pesan').keyup(function() {
			var total_jumlah_awal = parseFloat($('#total_jumlah').val());
			var satuan_besar = parseFloat($('#<?php echo $ls_gridname; ?>_satuan').val());
			var qty_pesan_besar = parseFloat($('#<?php echo $ls_gridname; ?>_qty_pesan').val());
			var total_jumlah;

			if(total_jumlah_awal == ''){
				total_jumlah = satuan_besar * qty_pesan_besar;	
			} else {
				total_jumlah = total_jumlah_awal + (satuan_besar * qty_pesan_besar);
			}

			$('#total_jumlah').setval(total_jumlah);

		});
		
	});
</script>
<div id="form_<?php echo $ls_gridname; ?>_container" style="padding:5px;width:800px;height:400px;">
	<div id="form_<?php echo $ls_gridname; ?>">
    <input id="urutan" />
    <table class="tb_form" style="width:100%;" cellpadding="0" cellspacing="0">
    <tr>
        <td class="label">Barang</td>
        <td><input id="kd_barang" /><input id="nama_barang" /></td>
    </tr>
    <tr>
        <td colspan="2">
        	<fieldset class="inline-block">
				<legend>Satuan</legend>
				<table>
					<tr>
						<td>Kemasan</td>
						<td>Satuan</td>
						<td>Qty Pesan</td>
						<td>Harga Beli</td>
					</tr>
					<tr>
						<td><input id="kemasan"></td>
						<td><input id="satuan"></td>
						<td><input id="qty_pesan"></td>
						<td><input id="harga_beli"></td>
					</tr>
					<tr>
						<td>Kemasan</td>
						<td>Satuan</td>
						<td>Qty Pesan Pcs</td>
						<td>Harga Beli Pcs</td>
					</tr>
					<tr>
						<td><input id="kemasan_pcs"></td>
						<td><input id="satuan_pcs"></td>
						<td><input id="qty_pesan_pcs"></td>
						<td><input id="harga_beli_pcs"></td>
					</tr>
				</table>
				
			</fieldset>
        </td>
    </tr>
   <tr>
        <td colspan="2">
        	<fieldset class="inline-block">
				<legend>Diskon %</legend>
				<table>
					<tr>
						<td>Diskon 1</td>
						<td>Diskon 2</td>
						<td>Diskon 3</td>
						<td>Diskon 4</td>
						<td>Diskon 5</td>
					</tr>
					<tr>
						<td><input id="diskon_1"></td>
						<td><input id="diskon_2"></td>
						<td><input id="diskon_3"></td>
						<td><input id="diskon_4"></td>
						<td><input id="diskon_5"></td>
					</tr>
				</table>
				
			</fieldset>
        </td>
    </tr>
    <tr>
        <td colspan="2">Catatan<br><input id="catatan" /><input id="total_harga" /><input id="total_jumlah" /></td>
    </tr>
    </table>
	</div>
</div>
<?php 



// ----------------- >> Table Detail << ----------------- ?>
<script type="text/javascript">
	$(document).ready(function(){
		$('#<?php echo $ls_gridname; ?>').datagrid({
			url:gs_path+'/'+controller+'/<?php echo $ls_gridname; ?>_data',
			queryParams:{ no_po:$('#no_po').getval(), rows:9999999999 },
			<?php if($mode!='view'){ 
			// -->> Toolbar [Start]
			// Only Appear On Mode Create / Edit ?>
			toolbar:[{
				text:'Tambah',
				iconCls:'icon-add',
				handler:function(){
					var kd_vendor = $('#kd_vendor').getval();
					if (kd_vendor=='') {$.messager.alert('&nbsp;', 'Please select Supplier', 'warning');}
					else{
						resetError();
					
						$('#form_<?php echo $ls_gridname; ?>_container').dialog('open');
						$('#form_<?php echo $ls_gridname; ?>').data('mode', 'create');
						$('#form_<?php echo $ls_gridname; ?>_container').prev().find('.panel-title').html('Tambah Detail Barang');					
						$('#form_<?php echo $ls_gridname; ?>').resetForm();
					}
				}
			},'-',{
				text:'Ubah',
				iconCls:'icon-edit',
				handler:function(){
					var oSel=$('#<?php echo $ls_gridname; ?>').datagrid('getSelected'); 
					if(oSel==null){ $.messager.alert('&nbsp;', gs_msg_row_unselected, 'warning'); }
					else{ 
						resetError();
						
						$('#form_<?php echo $ls_gridname; ?>_container').dialog('open');
						$('#form_<?php echo $ls_gridname; ?>').data('mode', 'edit');
						$('#form_<?php echo $ls_gridname; ?>_container').prev().find('.panel-title').html('Ubah Detail Barang');
						
						jsonToForm(oSel, {prefix:'<?php echo $ls_gridname; ?>_'});
					}
				}
			},'-',{
				text:'Hapus',
				iconCls:'icon-remove',
				handler:function(){
					var row = $('#<?php echo $ls_gridname; ?>').datagrid('getSelected');
					if(row==null){ $.messager.alert('&nbsp;', gs_msg_row_unselected, 'warning'); }
					else if(row){
						if(!confirm('Hapus baris data?')) return false;

						var index = $('#<?php echo $ls_gridname; ?>').datagrid('getRowIndex', row);
						$('#<?php echo $ls_gridname; ?>').datagrid('deleteRow', index);
					}
				}
			}],<?php 
			} // -->> Toolbar [End]
			?>
			onClickRow:function(rowIndex){
				var lastIndex = $('#<?php echo $ls_gridname; ?>').data('selectedIndex');
				$('#<?php echo $ls_gridname; ?>').data('selectedIndex', rowIndex);
			},
			onLoadSuccess:function(){ }
		});
	});
	
</script>
<table id="<?php echo $ls_gridname; ?>" style="width:600;height:auto" singleSelect="true" idField="urutan" showFooter="true">
<thead>
    <tr>
    	<th field="kd_barang" width="200">Barcode</th>
        <th field="nama_barang" width="200">Nama Barang</th>
        <th field="qty_pesan" width="120" align="right" formatter="formatNumericPoint2">Qty Pesan 1</th>
        <th field="kemasan" width="200">Kemasan</th>
        <th field="satuan" width="200">Satuan</th>
        <th field="harga_beli" width="200">Harga Beli/Kemasan</th>
        <th field="qty_pesan_pcs" width="200">Qty Pesan 2</th>
        <th field="kemasan_pcs" width="200">Kemasan Pcs</th>
        <th field="satuan_pcs" width="200">Satuan Pcs</th>
        <th field="harga_beli_pcs" width="200">Harga Beli/Kemasan Pcs</th>
        <th field="total_qty" width="200">Total Qty</th>
        <th field="total_harga" width="200">Total Harga</th>
        <th field="catatan" width="200">Catatan</th>
    </tr>
</thead>
</table>
